// import styled from "styled-components";

import styled from "styled-components";
import bigBG from "../../assets/image/LaneMonitoring/bigBG.png";
import btnL from "../../assets/image/LaneMonitoring/btnL.png";
import btnG from "../../assets/image/LaneMonitoring/btnG.png";
import bigbtn from "../../assets/image/LaneMonitoring/bigBtn.png";
import bigbtn2 from "../../assets/image/LaneMonitoring/bigBtn2.png";
import topTtile from "../../assets/image/LaneMonitoring/top-title.png";
import smallBG from "../../assets/image/LaneMonitoring/smallBG.png";
import videoBg from "../../assets/image/LaneMonitoring/videoBg.png";
// import midBG from "../../assets/image/LaneMonitoring/midBG.png";
import unactive from "../../assets/image/LaneMonitoring/graySwitch.png";
import active from "../../assets/image/LaneMonitoring/lightSwitch.png";
import modalBG from "../../assets/image/LaneMonitoring/modalBG.png";
import dizhuo1 from "../../assets/image/LaneMonitoring/dizuo1.png";
import dizhuo2 from "../../assets/image/LaneMonitoring/dizuo2.png";
import round1 from "../../assets/image/LaneMonitoring/round1.png";
import round2 from "../../assets/image/LaneMonitoring/round2.png";
import inputBg from "../../assets/image/LaneMonitoring/input.png";
import danweiBG from "../../assets/image/LaneMonitoring/danweibg.png";
import lastSmallBG from "../../assets/image/LaneMonitoring/lastsmallBG.png";
// 矫正准备背景
import jiaozheng_zhunbei_modal_bg from "../../assets/image/LaneMonitoring/jiaozheng_zhunbei_modal_bg.png";
import jiaozhun_bg from "../../assets/image/LaneMonitoring/jiaozhun_bg.png";

// 设备控制背景
import shebeikongzhi_bg from "../../assets/image/LaneMonitoring/shebeikongzhi_bg.png";
// import changKuang from "../../assets/image/LaneMonitoring/chang_kuang.png";
export const LaneMonitoringBox = styled.div`
  width: 100vw;
  height: 100vh;
  background: url(${bigBG}) no-repeat;
  background-size: 100% 100%;
  color: #7e8c9e;
  .top-title {
    width: 100vw;
    height: 7.6%;
    text-align: center;
    font-weight: bold;
    font-size: 3.4rem;
    background: url(${topTtile}) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .left_zhuangtai {
      position: absolute;
      left: 10rem;
      font-size: 1.6rem;
      color: #ffffff;
      display: flex;
      align-items: center;
      .btn {
        width: 8rem;
        height: 4rem;
        background: url(${btnL}) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #fdffff;
        margin-left: 2rem;
      }
      .btn:hover {
        background: url(${btnG}) no-repeat;
        background-size: 100% 100%;
        color: #92b2d0;
      }
    }
    .text-title {
      color: #ffffff;
      background: linear-gradient(
        0deg,
        #79c5ff 0%,
        #ffffff 59.8388671875%,
        #ffffff 100%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .right-time {
      width: 30rem;
      position: absolute;
      right: 1.5rem;
      color: #d4eaff;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 1.6rem;
      //所有子元素
      .text-riqi {
        width: 10rem;
      }
      .text-xingqi {
        width: 5rem;
      }
    }
  }
  .neirong {
    width: 100vw;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    box-sizing: border-box;
    margin-top: 1rem;

    .neirong_right {
      width: 25%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      position: relative;
      .right-glj,
      .right-pd,
      .right-ss {
        .title {
          height: 22.98%;
          font-size: 2rem;
          margin-left: 5.5rem;
          font-weight: bold;
          line-height: 200%;
          color: #ffffff;
          background: linear-gradient(
            0deg,
            #79c5ff 0%,
            #ffffff 59.8388671875%,
            #ffffff 100%
          );
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .xinhao_box {
          width: 90%;
          height: 20%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          font-size: 1.6rem;
          margin: 2rem 0;
          div {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.8rem;
            .xinhao {
              width: 1.4rem;
              height: 1.4rem;
              margin-right: 1rem;
              border-radius: 50%;
            }
            .bg-green {
              background-color: #14e328;
              box-shadow: 0px 0px 5px 0px rgba(57, 243, 75, 0.5);
            }
            .bg-gray {
              background-color: #7e8c9e;
            }
            .bg-red {
              background-color: #e35618;
              box-shadow: 0px 0px 5px 0px rgba(243, 57, 57, 0.5);
            }
            .text-red {
              color: #e35618;
            }
            .text-green {
              color: #14e328;
            }
            .text-gray {
              color: #7e8c9e;
            }
          }
        }
        .btn-box {
          width: 90%;
          height: 20%;
          margin-left: 2rem;
          display: flex;
          align-items: center;
          justify-content: space-around;
          font-size: 1.6rem;
          .btn {
            width: 9rem;
            height: 4rem;
            background: url(${btnL}) no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #fdffff;
          }
          .btn:hover {
            background: url(${btnG}) no-repeat;
            background-size: 100% 100%;
            color: #92b2d0;
          }
          .bigbtn {
            width: 18rem;
            background: url(${bigbtn}) no-repeat;
            background-size: 100% 100%;
          }
          .bigbtn:hover {
            background: url(${bigbtn2}) no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      .glj-title {
        /* position: absolute;
                top: -2.5rem;
                right: 45%;
                text-align: center;
                font-weight: bold;
                font-size: 1.8rem;
                color: #2EA4FF;
                background: linear-gradient(0deg, #79C5FF 0%, #FFFFFF 59.8388671875%, #FFFFFF 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent; */
        font-weight: bold;
        font-size: 1.8rem;
        color: #2ea4ff;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        .glj-title-left {
          display: flex;
          align-items: center;
          .btn {
            width: 9rem;
            height: 4rem;
            background: url(${btnL}) no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #fdffff;
          }
          .btn:hover {
            background: url(${btnG}) no-repeat;
            background-size: 100% 100%;
            color: #92b2d0;
          }
        }
      }
      .right-glj {
        width: 100%;
        height: 18.5%;
        background: url(${smallBG}) no-repeat;
        background-size: 100% 100%;
        .titleFlex {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .btn {
            width: 9rem;
            height: 4rem;
            background: url(${btnL}) no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #fdffff;
            margin-left: 2rem;
          }
          .btn:hover {
            background: url(${btnG}) no-repeat;
            background-size: 100% 100%;
            color: #92b2d0;
          }
          .frequency {
            color: #eff9ff;
            font-size: 1.6rem;
            margin-right: 2rem;
          }
        }
        .xinhao_box {
          margin: 2rem 1rem;
        }
      }
      .right-pd {
        width: 100%;
        height: 18.5%;
        background: url(${danweiBG}) no-repeat;
        background-size: 100% 100%;
        position: relative;
        .title {
          line-height: 240%;
          position: relative;
        }
        .full {
          font-size: 1.6rem;
          color: #ffffff;
          background: linear-gradient(
            0deg,
            #79c5ff 0%,
            #ffffff 59.8388671875%,
            #ffffff 100%
          );
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          position: absolute;
          top: 1.5rem;
          right: 10rem;
          cursor: pointer;
          font-weight: bold;
          z-index: 10;
        }
        .title::after {
          content: "吨";
          position: absolute;
          right: 3.5rem;
          font-size: 1.6rem;
          font-weight: bold;
          color: #ffffff;
          background: linear-gradient(
            0deg,
            #79c5ff 0%,
            #ffffff 59.8388671875%,
            #ffffff 100%
          );
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .pd-xinxi {
          width: 90%;
          height: 65%;
          margin: 1rem auto;
          display: flex;
          align-items: center;
          justify-content: space-around;
          font-size: 2rem;
          text-align: center;
          .pd-xinxi-left {
            width: 50%;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .pd-img {
              width: 5.5rem;
              height: 5.5rem;
              background: url(${round2}) no-repeat;
              background-size: 100% 100%;
            }
            .pd-img2 {
              width: 5.5rem;
              height: 5.5rem;
              background: url(${round1}) no-repeat;
              background-size: 100% 100%;
            }
            .pd-content {
              margin-right: 2rem;
              .pd-text {
                font-size: 1.6rem;
                color: #f8feff;
              }
            }
            .xiaozhun {
              display: inline-block;
              padding: 0.2rem;
              font-size: 1.2rem;
              color: #92b2d0;
              border: 1px solid #3c8bff;
              border-radius: 0.5rem;
              margin-left: 1rem;
              background: linear-gradient(0deg, rgba(60, 139, 255, 0.35) 0%);
              cursor: pointer;
            }
            .text-num {
              font-size: 2.6rem;
              font-weight: bold;
              color: #3be0e8;
              margin-top: 1rem;
            }
          }
          .pd-xinxi-right {
            width: 45%;
            height: 100%;
            padding: 2rem;
            box-sizing: border-box;
          }
        }
      }
      .right-ss {
        width: 100%;
        height: 18.5%;
        background: url(${smallBG}) no-repeat;
        background-size: 100% 100%;
        .ss-xinxi {
          width: 100%;
          margin: 1rem auto;
          display: flex;
          align-items: center;
          justify-content: space-around;
          font-size: 2rem;
          .ss-xinxi-left {
            width: 48%;
            box-sizing: border-box;
            .xinhao_box {
              width: 100%;
              margin: 2rem 0;
              justify-content: space-between;
            }
          }
          .ss-xinxi-right {
            width: 12rem;
            height: 8rem;
            margin-right: 3rem;
            margin-top: 2rem;
            box-sizing: border-box;
            background: url(${dizhuo1}) no-repeat;
            background-size: 100% 100%;
            position: relative;
            .ss-text {
              position: absolute;
              font-size: 2.8rem;
              font-weight: bold;
              color: #3089ff;
              top: 35%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
            .ss-bot {
              width: 60%;
              position: absolute;
              font-size: 1.5rem;
              color: #f8feff;

              top: 73%;
              left: 50%;
              transform: translate(-40%, -40%);
            }
          }
        }
      }
      .right-zm {
        width: 100%;
        height: 18.5%;
        display: flex;
        justify-content: space-between;
        .left,
        .right {
          width: 48.2%;
          height: 100%;
          background: url(${lastSmallBG}) no-repeat;
          background-size: 100% 100%;
          .title {
            height: 22.98%;
            font-size: 2rem;
            margin-left: 5.5rem;
            font-weight: bold;
            line-height: 200%;
            color: #ffffff;
            background: linear-gradient(
              0deg,
              #79c5ff 0%,
              #ffffff 59.8388671875%,
              #ffffff 100%
            );
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .xinhao_box {
            width: 100%;
            height: 20%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 1.4rem;
            margin: 2rem 0;
            padding-left: 0.5rem;
            div {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 0.8rem;
              .xinhao {
                width: 1.4rem;
                height: 1.4rem;
                margin-right: 1rem;
                border-radius: 50%;
              }
              .bg-green {
                background-color: #14e328;
                box-shadow: 0px 0px 5px 0px rgba(57, 243, 75, 0.5);
              }
              .bg-gray {
                background-color: #7e8c9e;
              }
              .bg-red {
                background-color: #e35618;
                box-shadow: 0px 0px 5px 0px rgba(243, 57, 57, 0.5);
              }
              .text-red {
                color: #e35618;
              }
              .text-green {
                color: #14e328;
              }
              .text-gray {
                color: #7e8c9e;
              }
            }
          }
          .btn-box {
            width: 100%;
            height: 20%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 1.6rem;
            .btn {
              width: 9rem;
              height: 4rem;
              background: url(${btnL}) no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              color: #fdffff;
            }
            .btn:hover {
              background: url(${btnG}) no-repeat;
              background-size: 100% 100%;
              color: #92b2d0;
            }
            .bigbtn {
              width: 18rem;
              background: url(${bigbtn}) no-repeat;
              background-size: 100% 100%;
            }
            .bigbtn:hover {
              background: url(${bigbtn2}) no-repeat;
              background-size: 100% 100%;
            }
          }
        }

        /* .zm-xinxi{
                    width: 100%; 
                    margin: 1rem auto;
                    font-size: 2rem;
                    .xinhao_box{
                        margin: 2.5rem 1rem;
                    }
                } */
      }
      .right-rfj {
        width: 100%;
        height: 18.5%;
        background: url(${smallBG}) no-repeat;
        background-size: 100% 100%;
        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 26.49%;
          font-size: 2rem;
          margin-left: 5.5rem;
          font-weight: bold;
          line-height: 200%;
          .text-title {
            color: #ffffff;
            background: linear-gradient(
              0deg,
              #79c5ff 0%,
              #ffffff 59.8388671875%,
              #ffffff 100%
            );
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .switchBox {
            width: 10rem;
            height: 98%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-right: 2rem;
            .dun {
              font-size: 1.6rem;
              cursor: pointer;
              width: 4.4rem;
              height: 4rem;
              text-align: center;
            }
            .active {
              background: url(${active}) no-repeat;
              background-size: 100% 100%;
              color: #ffffff;
            }
            .unactive {
              background: url(${unactive}) no-repeat;
              background-size: 100% 100%;
              color: #5c6e7f;
            }
          }
        }
        .yyz-content {
          width: 100%;
          height: 75%;
          display: flex;
          justify-content: space-between;
          align-content: space-around;
          flex-wrap: wrap;
          .yyz-item-one {
            width: 12rem;
            height: 8.6rem;
            font-size: 2rem;
            text-align: center;
            background: url(${dizhuo2}) no-repeat;
            background-size: 100% 100%;
            margin: 1rem 3rem 0rem 3rem;
            position: relative;
            .yyz-title {
              font-size: 1.2rem;
              color: #92b2d0;
              position: absolute;
              top: -0.5rem;
              left: 50%;
              transform: translateX(-50%);
              width: 100%;
            }
            .yyz-value {
              width: 100%;
              font-size: 2.8rem;
              font-weight: bold;
              color: #fff;
              background: linear-gradient(0deg, #ffffff 0%, #01befc 100%);
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              position: absolute;
              top: 1rem;
              left: 50%;
              transform: translateX(-50%);
            }
          }
          .yyz-item {
            width: 55%;
            height: 50%;

            .yyz-title {
              font-size: 1.4rem;
              color: #92b2d0;
              margin: 0.5rem 2rem 1rem 0.3rem;
            }
            .inputBox {
              width: 18rem;
              height: 4.4rem;
              background: url(${inputBg}) no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .inputLeft {
                width: 11rem;
                background: none;
                border: none;
                outline: none;
                color: #5697cc;
              }
              .inputLeft::placeholder {
                color: #5697cc;
              }
              .inputRight {
                width: 6rem;
                font-size: 1.4rem;
                color: #fff;
                text-align: center;
                cursor: pointer;
              }
            }
          }
        }
      }

      .glj-modal {
        .ant-modal-content {
          width: 45rem;
          min-height: 27rem;
          background: url(${modalBG}) no-repeat;
          background-size: 100% 100%;
          position: relative;
          .ant-modal-header {
            margin-left: 2rem;
            color: #ffffff;
            background: linear-gradient(
              0deg,
              #79c5ff 0%,
              #ffffff 59.8388671875%,
              #ffffff 100%
            );
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transform: translateY(-1.6rem);
          }
          .ant-modal-close-x {
            color: #ffffff;
            transform: translateY(-1rem);
          }
          .title-text {
            font-size: 1.6rem;
            color: #92b2d0;
            margin-left: 1rem;
          }
          .textarea {
            margin-top: 1rem;
            background-color: #0c1e37;
            border-color: #0c1e37;
            color: #556986;
          }
          .textarea::placeholder {
            color: #556986; /* 设置占位符的颜色为红色 */
            opacity: 1; /* 如果需要，可以调整透明度 */
          }
          .footerBtn {
            margin-left: 20rem;
            display: flex;
            .ok {
              width: 9rem;
              height: 4rem;
              background: url(${btnL}) no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              color: #fdffff;
            }
            .cancel {
              width: 9rem;
              height: 4rem;
              background: url(${btnG}) no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              color: #92b2d0;
              margin-right: 2rem;
            }
          }
        }
      }
    }
    .neirong_center {
      width: 47.98%;
      height: 100%;

      .video-box {
        width: 100%;
        height: 38.8%;
        background: url(${videoBg}) no-repeat;
        background-size: 100% 100%;
        .title {
          height: 9.48%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .text {
            flex: 1;
            font-size: 2rem;
            margin-left: 5.5rem;
            font-weight: bold;
            line-height: 200%;
            color: #ffffff;
            background: linear-gradient(
              0deg,
              #79c5ff 0%,
              #ffffff 59.8388671875%,
              #ffffff 100%
            );
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .btn-box {
            flex: 2;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 1.4rem;
            .btn {
              width: 9rem;
              height: 4rem;
              background: url(${btnG}) no-repeat;
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              color: #fdffff;
              font-size: 1.4rem;
            }
          }
          .select {
            flex: 1;
            height: 100%;
            margin-right: 3rem;
            text-align: right;
          }
        }
             
        .video {
          width: 95%;
          height: 85%;
          margin: 1rem auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
           .video_zezao{
                width: 100%;
                height: 100%;
                background: rgba(71, 71, 71, 0.521);
                position: absolute;
                top:0;
                left: 0;
                  z-index: 5;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-direction: column;
                  font-size: 3rem;
                  color: #2ea4ff;
      }
        }
      }
      .center_bottom {
        width: 100%;
        height: 59.28%;
        margin-top: 1.6rem;
        .cb_top {
          width: 100%;
          height: 32%;
          display: flex;
          justify-content: space-between;
          margin-bottom: 1.6rem;
        }
        .cb_bottom {
          width: 100%;
          height: 65%;
          display: flex;
          justify-content: space-between;

          .cb_right {
            width: 49%;
          }
        }
        .right-zm {
          width: 52.2%;
          height: 31.2%;
          display: flex;
          justify-content: space-between;
          .left,
          .right {
            width: 48.2%;
            height: 100%;
            background: url(${lastSmallBG}) no-repeat;
            background-size: 100% 100%;
            .title {
              height: 22.98%;
              font-size: 2rem;
              margin-left: 5.5rem;
              font-weight: bold;
              line-height: 200%;
              color: #ffffff;
              background: linear-gradient(
                0deg,
                #79c5ff 0%,
                #ffffff 59.8388671875%,
                #ffffff 100%
              );
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              display: flex;
              align-items: center;
            }
            .btn-box {
              width: 100%;
              height: 50%;
              display: flex;
              align-items: center;
              justify-content: space-around;
              font-size: 1.6rem;
              .btn {
                width: 9rem;
                height: 4rem;
                background: url(${btnL}) no-repeat;
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: #fdffff;
              }
              .btn:hover {
                background: url(${btnG}) no-repeat;
                background-size: 100% 100%;
                color: #92b2d0;
              }
              .bigbtn {
                width: 18rem;
                background: url(${bigbtn}) no-repeat;
                background-size: 100% 100%;
              }
              .bigbtn:hover {
                background: url(${bigbtn2}) no-repeat;
                background-size: 100% 100%;
              }
            }
            .rfj-xinxi,
            .zm-xinxi {
              height: 50%;
              display: flex;
              align-items: center;
            }
          }

          /* .zm-xinxi{
                    width: 100%; 
                    margin: 1rem auto;
                    font-size: 2rem;
                    .xinhao_box{
                        margin: 2.5rem 1rem;
                    }
                } */
        }
        .yyz-data {
          width: 45.25%;
          height: 66.5%;
          display: flex;
          flex-wrap: wrap;
          align-content: space-between; /* 纵向两端对齐 */
          .yyz-top,
          .yyz-bot {
            width: 100%;
            height: 47.3%;
            background: url(${smallBG}) no-repeat;
            background-size: 100% 100%;
            .title {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 26.49%;
              font-size: 2rem;
              margin-left: 5.5rem;
              font-weight: bold;
              line-height: 200%;
              .text-title {
                color: #ffffff;
                background: linear-gradient(
                  0deg,
                  #79c5ff 0%,
                  #ffffff 59.8388671875%,
                  #ffffff 100%
                );
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
              .switchBox {
                width: 10rem;
                height: 98%;
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin-right: 2rem;
                transform: translateY(1px);
                .dun {
                  font-size: 1.6rem;
                  cursor: pointer;
                  width: 4.4rem;
                  height: 4rem;
                  text-align: center;
                }
                .active {
                  background: url(${active}) no-repeat;
                  background-size: 100% 100%;
                  color: #ffffff;
                }
                .unactive {
                  background: url(${unactive}) no-repeat;
                  background-size: 100% 100%;
                  color: #5c6e7f;
                }
              }
            }
            .yyz-content {
              width: 100%;
              height: 75%;
              display: flex;
              justify-content: space-between;
              align-content: space-around;
              flex-wrap: wrap;
              .yyz-item-one {
                width: 12rem;
                height: 8.6rem;
                font-size: 2rem;
                text-align: center;
                background: url(${dizhuo2}) no-repeat;
                background-size: 100% 100%;
                margin: 1rem 3rem 0rem 3rem;
                position: relative;
                .yyz-title {
                  font-size: 1.2rem;
                  color: #92b2d0;
                  position: absolute;
                  top: -0.5rem;
                  left: 50%;
                  transform: translateX(-50%);
                }
                .yyz-value {
                  width: 100%;
                  font-size: 2.8rem;
                  font-weight: bold;
                  color: #fff;
                  background: linear-gradient(0deg, #ffffff 0%, #01befc 100%);
                  background-clip: text;
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                  position: absolute;
                  top: 1rem;
                  left: 50%;
                  transform: translateX(-50%);
                }
              }
              .yyz-item {
                width: 55%;
                height: 50%;

                .yyz-title {
                  font-size: 1.4rem;
                  color: #92b2d0;
                  margin: 0.5rem 2rem 1rem 0.3rem;
                }
                .inputBox {
                  width: 18rem;
                  height: 4.4rem;
                  background: url(${inputBg}) no-repeat;
                  background-size: 100% 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .inputLeft {
                    width: 11rem;
                    background: none;
                    border: none;
                    outline: none;
                    color: #5697cc;
                  }
                  .inputLeft::placeholder {
                    color: #5697cc;
                  }
                  .inputRight {
                    width: 6rem;
                    font-size: 1.4rem;
                    color: #fff;
                    text-align: center;
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
        .yyz-right_box {
          width: 52.2%;
          height: 66.5%;
          display: flex;
          flex-wrap: wrap;
          align-content: space-between; /* 纵向两端对齐 */
          .yyz-temp {
            height: 47.3%;
            background: url(${smallBG}) no-repeat;
            background-size: 100% 100%;
            .title {
              height: 26.49%;
              font-size: 2rem;
              margin-left: 5.5rem;
              font-weight: bold;
              /* line-height: 200%; */
              color: #ffffff;
              background: linear-gradient(
                0deg,
                #79c5ff 0%,
                #ffffff 59.8388671875%,
                #ffffff 100%
              );
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              display: flex;
              align-items: center;
            }
            .btn-box {
              margin: 1rem auto;
              width: 90%;
              /* height: 55%; */
              margin-left: 2rem;
              display: flex;
              align-items: center;
              justify-content: space-between;
              align-content: space-between;
              flex-wrap: wrap;
              font-size: 1.6rem;
              padding: 0 2rem;
              box-sizing: border-box;
              .bigbtn {
                /* width: 17rem; */
                height: 4rem;
                background: url(${bigbtn}) no-repeat;
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: #fdffff;
                padding: 0 1rem;
                margin-right: 2rem;
                margin-bottom: 1rem;
              }
              .bigbtn:hover {
                background: url(${bigbtn2}) no-repeat;
                background-size: 100% 100%;
              }
            }
          }
          .yyz-flow {
            height: 47.3%;
            width: 100%;
            background: url(${smallBG}) no-repeat;
            background-size: 100% 100%;
            .liquidFillBox {
              width: 100%;
              height: 70%;
              display: flex;
              align-items: center;
              justify-content: center;
              :nth-child(1) {
                width: 49%;
                box-sizing: border-box;
              }
              .styleBox {
                padding: 2rem;
              }
              .smallTitle {
                font-size: 1.4rem;
                width: 4rem;
                margin-bottom: 1rem;
                color: #f5f6f9;
                transform: translateX(-1rem);
              }
              .styleNum {
                width: 5rem;
                font-size: 2rem;
                color: #24cafd;
                font-weight: bold;
              }
              .styleNum2 {
                font-size: 2rem;
                color: #fee21d;
                font-weight: bold;
              }
            }
          }
        }

        .yyz-pressure {
          width: 45.25%;
          height: 31.2%;
          background: url(${smallBG}) no-repeat;
          background-size: 100% 100%;
          .btn-box {
            margin-top: 1.5rem;
            width: 90%;
            height: 35%;
            margin-left: 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;
            font-size: 1.6rem;
            .bigbtn {
              width: 18rem;
              height: 4rem;
              background: url(${bigbtn}) no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              color: #fdffff;
            }
            .bigbtn:hover {
              background: url(${bigbtn2}) no-repeat;
              background-size: 100% 100%;
            }
          }
        }
        .yyz-temp,
        .yyz-pressure {
          .xinhao_box {
            width: 90%;
            height: 20%;
            margin-left: 2rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 1.6rem;
            div {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 0.8rem;
              .xinhao {
                width: 1.4rem;
                height: 1.4rem;
                margin-right: 1rem;
                border-radius: 50%;
              }
              .bg-green {
                background-color: #14e328;
                box-shadow: 0px 0px 5px 0px rgba(57, 243, 75, 0.5);
              }
              .bg-gray {
                background-color: #7e8c9e;
              }
              .bg-red {
                background-color: #e31414;
                box-shadow: 0px 0px 5px 0px rgba(243, 57, 57, 0.5);
              }
              .bg-orange {
                background-color: #e35618;
              }
              .bg-blue {
                background-color: #14bee3;
                box-shadow: 0px 0px 5px 0px rgba(20, 190, 227, 0.5);
              }
              .text-orange {
                color: #e35618;
              }
              .text-green {
                color: #14e328;
              }
              .text-gray {
                color: #7e8c9e;
              }
              .text-red {
                color: #e31414;
              }
              .text-blue {
                color: #14bee3;
              }
            }
          }
        }

        .yyz-pressure,
        .yyz-flow {
          .title {
            height: 13.49%;
            font-size: 2rem;
            margin-left: 5.5rem;
            font-weight: bold;
            line-height: 200%;
            color: #ffffff;
            background: linear-gradient(
              0deg,
              #79c5ff 0%,
              #ffffff 59.8388671875%,
              #ffffff 100%
            );
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
        .yyz-pressure,
        .yyz-flow {
          .title {
            height: 22.49%;
          }
        }
      }
    }
    .fullScreen {
      width: 100vw;
      height: 90vh;
      position: fixed;
      z-index: 1000;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      font-size: 8rem;
      .title {
        width: 70%;
        display: flex;
        justify-content: space-between;
        .instant,
        .accumulated {
          width: 50%;
          font-weight: bold;
          text-align: center;
        }
      }

      .values {
        display: flex;
        justify-content: space-between;
        width: 70%;
        height: 30rem;
        font-size: 15rem;
        margin-bottom: 15rem;
        .instant-value,
        .accumulated-value {
          width: 50%;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .jiaozunZhunbei {
    .ant-modal-content {
      background: url(${jiaozheng_zhunbei_modal_bg}) no-repeat;
      background-size: 100% 100%;
      padding: 0 !important;
      width: 76rem;
      height: 47.2rem;
      svg {
        color: #ffffff;
      }
      .ant-modal-header {
        background: none;
        .ant-modal-title {
          font-weight: 600;
          padding-left: 5rem;
          font-size: 1.8rem;
          color: #ffffff;
          height: 5rem;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .jiaozun {
    .ant-modal-content {
      background: url(${jiaozhun_bg}) no-repeat;
      background-size: 100% 100%;
      padding: 0 !important;
      width: 92rem;
      height: 74.6rem;
      svg {
        color: #ffffff;
      }
      .ant-modal-header {
        background: none;
        .ant-modal-title {
          font-weight: 600;
          padding-left: 5rem;
          font-size: 1.8rem;
          color: #ffffff;
          height: 5rem;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .jiaozun001 {
    .ant-modal-content {
      background: url(${shebeikongzhi_bg}) no-repeat;
      background-size: 100% 100%;
      padding: 0 !important;
      width: 94.2rem;
      height: 53rem;
      svg {
        color: #ffffff;
      }
      .ant-modal-header {
        background: none;
        .ant-modal-title {
          font-weight: 600;
          padding-left: 5rem;
          font-size: 1.8rem;
          color: #ffffff;
          height: 5rem;
          display: flex;
          align-items: center;
        }
      }
    }
  }
`;

export const ItemBox = styled.div`
  display: flex;
  align-items: center;
  padding: 2rem 0;
`;

//  篷布监测弹窗
export const ModalBox = styled.div<{
  $img?: string;
}>`
  .iamge_box {
    width: 63.2rem;
    height: 36rem;
    background: url(${(props) => props.$img}) no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .ant-empty-description {
      color: #fdffff;
    }
  }
  .button_box {
    display: flex;
    align-items: center;
    margin-top: 1.6rem;
    justify-content: center;
    .btn {
      padding: 0 2rem;
      height: 4rem;
      background: url(${btnL}) no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #fdffff;
      margin-left: 2rem;
    }
    /* .btn:hover {
      background: url(${btnG}) no-repeat;
      background-size: 100% 100%;
      color: #92b2d0;
    } */
  }
  .btn_guanbi {
    padding: 0 2rem;
    height: 4rem;
    width: 10rem;
    background: url(${btnL}) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fdffff;
    margin-left: 2rem;
    background: url(${btnG}) no-repeat;
    background-size: 100% 100%;
    color: #92b2d0;
    float: right;
  }
`;

export const ButtonBox = styled.div`
        width: 8rem;
        height: 4rem;
        background: url(${btnL}) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #fdffff;
        margin-left: 2rem;
        font-size: 1.6rem;
      &:hover {
        background: url(${btnG}) no-repeat;
        background-size: 100% 100%;
        color: #92b2d0;
      }
`
